<template>
	<view class="content-bg">
		<view class="pic">
			<block v-for="(item,index) in fileList" :key="index">
				<view style="position: relative;">
					<image :src="item.path" mode=""></image>
					<text class="del-btn yticon icon-fork" @click="deletePic(index)"></text>
				</view>
			</block>
			<view class="add" @click="chooseImg">
				<uni-icons type="plusempty" size="100rpx" color="#fff"></uni-icons>
			</view>

		</view>
		<view class="content">
			<view class="tip">默认第一页是首页</view>
			<view class="title">
				<input type="text" v-model="title" placeholder="填写标题" />
			</view>
			<view class="pha">
				<input type="text" v-model="content" placeholder="说说此刻感受" />
			</view>
		</view>
		<view class="tags" :class="active?'active':''">
			<input type="text" placeholder="#话题" @blur="active=false" @focus="inputVlaue" :value="tags" />
			<scroll-view scroll-y="true" v-show="active">
				<view class="tags-item" v-for="item in tagsItem" :key="item.index">
					#{{item }}
				</view>
			</scroll-view>
		</view>
		<view class="page-bottom" @click="save">
			发送
		</view>
	</view>

</template>

<script>
	import {
		mapState
	} from 'vuex';
	import {
		baseUrl
	} from "@/common/js/request.js"
	import {
		writeArticle
	} from "../../api/article.js"
	export default {
		data() {
			return {
				fileList: [],
				title: '',
				content: '',
				active: false,
				tags: [],
				tagsItem: [
					'饺子面试', '下管'
				],
				listStrs: [],
				form: {}
			};
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		onLoad(options) {
			const item = options.files ? JSON.parse(decodeURIComponent(options.files)) : [];
			console.log(item)
			this.fileList = item;
			console.log(this.fileList)
		},
		methods: {
			async save() {
				//保存图片
				let form = {};
				this.form.uid = this.userInfo.uid;
				this.form.title = this.title;
				this.form.content = this.title;
				this.form.taglist = this.tags.join();
				let that = this;
				for (let item of this.fileList) {
					let result = await this.uploadMulFile(item);
					if (result.code == 200) {
						this.listStrs.push(result.data)
					}
				}
				this.form.coverimg=this.listStrs[0];
				this.form.imglist=this.listStrs.join(",")
				writeArticle(this.form).then(res => {
					if (res.code == 200) {
						that.$commonFunc.msg(res.msg)
						uni.navigateBack()
					} else {
						that.$commonFunc.msg(res.msg)
					}
				})
			},
			uploadMulFile(item) {
				let that = this;
				return new Promise((resolve, reject) => {
					// for (let item of this.fileList) {
					uni.uploadFile({
						url: `${baseUrl}/uploadFile`, //开发者服务器 url
						filePath: item.path,
						name: 'file', // 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
						success(res) {
							let result = JSON.parse(res.data)
							if (result.code == 200) {
								console.log(result)
								resolve(result)
								// that.listStrs.push(result.data)
							} else {
								that.$commonFunc.msg(result.msg)
							}

						},
						fail(err) {
							console.log('失败', err);
						},
						complete() {
							console.log('结束');
						},
					})
					// }

				})
			},
			chooseImg() {
				let addList = []
				let _this = this;
				uni.chooseImage({
					count: 9, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					crop: true,
					success: function(res) {
						if (res.tempFilePaths) {
							// console.log(res.tempFilePaths)
							_this.fileList.push(...res.tempFiles)
							console.log(_this.fileList)
						} else {
							return;
						}
					}
				});
			},
			inputVlaue() {
				this.active = true
			},
			deletePic(index) {
				this.fileList.splice(index, 1);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tip {
		color: #C0C0C0;
		font-size: 24rpx;
	}

	.content-bg {
		position: relative;
	}

	.pic {
		display: flex;
		flex-wrap: wrap;
		width: 700rpx;
		align-items: center;
		justify-content: flex-start;
		margin: 60rpx auto 20rpx;

		image {
			padding: 10rpx;
			width: 200rpx;
			height: 200rpx;
			border-radius: 20rpx;
		}

		.add {
			width: 200rpx;
			height: 200rpx;
			border-radius: 20rpx;
			background: rgba(#8c8c8c, 0.5);
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.content {
		margin: 30rpx auto 20rpx;
		padding: 20rpx 40rpx;
		text-align: left;

		.title {
			font-size: 36rpx;
			padding: 30rpx 0;
			border-bottom: 1px #DCDCDC solid;
		}

		.pha {
			font-size: 34rpx;
			padding: 20rpx 0;
			min-height: 400rpx;
		}
	}

	.tags {
		padding: 20rpx 40rpx;
	}

	.active {
		padding-bottom: 900rpx;
	}

	.tags-item {
		color: #000;
		padding: 30rpx 60rpx 30rpx;
		border-bottom: 1px #dcdcdc solid;
	}

	.del-btn {
		position: absolute;
		right: -10rpx;
		top: -10rpx;
		z-index: 8;
		font-size: 44upx;
		line-height: 1;
		padding: 4upx;
		color: $font-color-disabled;
		background: #fff;
		border-radius: 50px;
	}

	.page-bottom {
		position: fixed;
		left: 10%;
		bottom: 8rpx;
		z-index: 95;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 80%;
		height: 120upx;
		margin: 0 auto;
		background: $app-theme-color;
		box-shadow: 0 0 20upx 0 rgba(0, 0, 0, .5);
		color: #fff;
		font-size: 40rpx;
		letter-spacing: 1em;
		border-radius: 16upx;
	}
</style>
